import React from 'react'
import ReactDOM from 'react-dom'
import { createStore, applyMiddleware } from 'redux'
import { Provider } from 'react-redux'
import thunk from 'redux-thunk'
import logger from 'redux-logger'
import App from './containers/app'
import reducer from './reducers'
import { addTodo, removeTodo } from './actions'
import { AddTodoType, RemoveTodoType } from './actions/actionTypes'
import Count from './components/count'


const store = createStore(reducer, applyMiddleware(logger, thunk))

const unsubscribe = store.subscribe(() => {
  console.log(store.getState())
})

const Root = () => {


  return (
    <Provider store={store}>
      <div>
          <button onClick={ () => {
            store.dispatch({
              type: AddTodoType,
              text: 'hello redux'
            })
          } }>click me !</button>
      </div>
      <App/>
      <Count/>
    </Provider>
  )
}

ReactDOM.render(<Root/>, document.getElementById('root'))
